<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>02.通过Proxy拦截对象属性的操作</title>
    </head>
    <body>
        <script>
            var obj = {
                'name' : 'allen',
                'group' : 'nodejs',
                '_type' : 'student'
            };

            /**
             * 1.做一个拦截器Proxy，用来拦截对象进行一些逻辑处理，
             * 注意这个Proxy拦截器目前只在火狐浏览器下实现了兼容
             * IE、Google、Safari、Opera都暂不支持，稍微注意下
             * 2.let proxy = new Proxy();有两个参数，如下
             * 1).第一个参数是需要被代理的对象
             * 2).第二个参数是代理的一些配置方法
             */
            let proxy = new Proxy(obj, {
                // target === obj
                set (target, key, value) {
                    // Reflect简单理解就是可以设置原始对象obj的默认值
                    Reflect.set (target, key, value);
                },
                get (target, key) {
                    return 'no';
                },
                deleteProperty (target, key) {
                    // Reflect.deleteProperty(target, key);
                }
            });

            // result：allen
            // console.log(obj['name']);

            // 被拦截器拦截到了return 'no';
            console.log(proxy.name);
            // 对拦截到的对象名字进行更改
            proxy.name = 'xiaoxiaoyou';
            /**
             * 这时候我们会发现修改没有成功，name还是allen,
             * 如果要想修改成功，那么得在set方法里面进行逻辑
             * 处理即可，如下：
             * Reflect.set (target, key, value);
             */
            // result：xiaoxiaoyou ---> 更改后的obj.name的名字
            console.log(`调用Reflect.set方法进行名字更改为：${obj.name}`);
        </script>
    </body>
</html>
